<template>
	<div class="map-container">
		<baidu-map v-if="hasData" ref="map" class="bm-view" :center="{ lng: 116.404, lat: 39.915 }" :zoom="zoom"
			:scroll-wheel-zoom="true" @zoomend="handleZoomChange" :pre-render="3" :mapStyle="mapStyle">
			<bml-marker-clusterer :averageCenter="true" :styles="markerstyle">
				<div v-for="point in points" :key="point.id">
					<div v-if="point.isOnline == 1" style="z-index: 1000">
						<bm-marker :position="{ lng: point.lng, lat: point.lat }" @click="infoWindowOpen(point)" :icon="{
                url: 'https://dtiotkecheng.hzsafer.com:56280/img/normal_elev.png',
                size: { width: 53, height: 81 },
              }">
							<bm-overlay pane="floatPane" :class="{ sample: true, active }" @draw="(e) => draw(e, point)"
								v-if="point.showInfoWindow">
								<div style="
                    text-align: left;
                    position: relative;
                    margin-left: 20px;
                  ">
									<el-button @click="infoWindowClose(point)" style="
                      position: absolute;
                      right: 10px;
                      top: 10px;
                      padding: 0 8px;
                      border: none;
                      background: transparent;
                      color: #fff;
                      font-size: 18px;
                    ">×</el-button>
									<div style="height: 40px"></div>
									<div style="display: flex">
										<div>
											<el-button style="width: 120px; margin: 0 auto" type="primary"
												@click="on_line(elevatorinfo)">在线</el-button>
										</div>
										<div style="line-height: 54px; margin-left: 20px">
											<img src="https://dtiotkecheng.hzsafer.com:56280/img/shexiangtou.png"
												alt="" />
										</div>
									</div>
									<div>安装位置 : {{ elevatorinfo.installationLocation }}</div>
									<div>
										使用单位 : {{ elevatorinfo.usingElevatorCorporation }}
									</div>
									<div>
										维保单位 : {{ elevatorinfo.maintenanceCorporation }}
									</div>
									<div>
										救援编码 : {{ elevatorinfo.rescueIdentificationCode }}
									</div>
									<div style="
                      display: flex;
                      justify-content: center;
                      margin-top: 15px;
                    ">
										<el-button style="width: 260px; margin: 0 auto" type="primary"
											@click="wblist(point)">维保记录</el-button>
									</div>
								</div>
							</bm-overlay>
						</bm-marker>
					</div>
					<div v-if="point.isOnline == 0">
						<bm-marker :position="{ lng: point.lng, lat: point.lat }" @click="infoWindowOpen(point)" :icon="{
                url: 'https://dtiotkecheng.hzsafer.com:56280/img/offline.png',
                size: { width: 53, height: 81 },
              }">
							<bm-overlay pane="floatPane" :class="{ sample: true, active }" @draw="(e) => draw(e, point)"
								v-if="point.showInfoWindow">
								<div style="
                    text-align: left;
                    position: relative;
                    margin-left: 20px;
                  ">
									<el-button @click="infoWindowClose(point)" style="
                      position: absolute;
                      right: 10px;
                      top: 10px;
                      padding: 0 8px;
                      border: none;
                      background: transparent;
                      color: #fff;
                      font-size: 18px;
                    ">×</el-button>
									<div style="height: 40px"></div>
									<div style="display: flex">
										<div>
											<el-button style="width: 120px; margin: 0 auto" type="info"
												@click="on_line(elevatorinfo)">离线</el-button>
										</div>
										<div style="line-height: 54px; margin-left: 20px" @click="infosopen">
											<img src="https://dtiotkecheng.hzsafer.com:56280/img/shexiangtou.png"
												alt="" />
										</div>
									</div>
									<div>安装位置 : {{ elevatorinfo.installationLocation }}</div>
									<div>
										使用单位 : {{ elevatorinfo.usingElevatorCorporation }}
									</div>
									<div>
										维保单位 : {{ elevatorinfo.maintenanceCorporation }}
									</div>
									<div>
										救援编码 : {{ elevatorinfo.rescueIdentificationCode }}
									</div>
									<div style="
                      display: flex;
                      justify-content: center;
                      margin-top: 15px;
                    ">
										<el-button style="width: 280px; margin: 0 auto" type="primary"
											@click="wblist(point)">维保记录</el-button>
									</div>
								</div>
							</bm-overlay>
						</bm-marker>
					</div>
				</div>
			</bml-marker-clusterer>
		</baidu-map>
	</div>

	<div class="bottom-buttons">
		<button @click="urlindex(1)">首页</button>
		<button @click="urlindex(2)">电梯管理</button>
		<button @click="urlindex(3)">应急救援</button>
		<button @click="urlindex(4)">维保管理</button>
	</div>

	<div class="top-image" :style="{ 'pointer-events': isMapZooming ? 'none' : 'auto' }">
		<!-- <div style="font-size: 18px;margin-top: -80px;">各行政区数据</div> -->
		<img src="https://dtiotkecheng.hzsafer.com:56280/img/ding.png" alt="" />
	</div>

	<div class="top-image1">
		<div class="title" v-if="windowsinfo == 1">
			<left1 />
		</div>

		<div class="title" v-if="windowsinfo == 2">
			<left2 />
		</div>

		<div class="title" v-if="windowsinfo == 3">
			<left3 />
		</div>

		<div class="title" v-if="windowsinfo == 4">
			<left4 />
		</div>
	</div>

	<div class="left-data-panel" v-if="windowsinfo == 1" :style="{ 'pointer-events': isMapZooming ? 'none' : 'auto' }">
		<div>
			<img src="@/assets/main_title.png" alt="" />
		</div>
	</div>

	<div class="left-data-panel" v-if="windowsinfo == 2" :style="{ 'pointer-events': isMapZooming ? 'none' : 'auto' }">
		<div>
			<img src="@/assets/2-1.png" alt="" />
		</div>
	</div>

	<div v-if="windowsinfo == 3">
		<!-- 		<div>
				<img src="@/assets/top3.png" alt="">
			</div> -->
	</div>

	<div class="left-data-panel" v-if="windowsinfo == 4" :style="{ 'pointer-events': isMapZooming ? 'none' : 'auto' }">
		<div>
			<img src="@/assets/2-1.png" alt="" />
		</div>
	</div>

	<div class="right-data-panel" v-if="windowsinfo == 1" :style="{ 'pointer-events': isMapZooming ? 'none' : 'auto' }">
		<right1></right1>
	</div>

	<div class="right-data-panel" v-if="windowsinfo == 2" :style="{ 'pointer-events': isMapZooming ? 'none' : 'auto' }">
		<right2></right2>
	</div>

	<div class="right-data-panel" v-if="windowsinfo == 3" :style="{ 'pointer-events': isMapZooming ? 'none' : 'auto' }">
		<right3></right3>
	</div>

	<div class="right-data-panel4" v-if="windowsinfo == 4"
		:style="{ 'pointer-events': isMapZooming ? 'none' : 'auto' }">
		<right4></right4>
	</div>

	<div class="bottom-image" :style="{ 'pointer-events': isMapZooming ? 'none' : 'auto' }"></div>
	<!-- 维保记录弹出框 -->
	<el-dialog v-model="dialogVisible" title="Tips" width="1700" style="
      background: linear-gradient(
        135deg,
        rgba(0, 100, 255, 0),
        rgba(0, 106, 133, 0)
      );
    ">
		<div class="dialogwb">
			<wblog :registrationCode="registrationCode"></wblog>
		</div>
	</el-dialog>

	<el-dialog v-model="dialogVisible1" title="Tips" width="1300" height="840" class="dialoginfos"
		style="background: url('https://xcqd.v0315.com/hj/bg.png')">
		<div class="dialoginfos">
			<infos></infos>
		</div>
	</el-dialog>
	<el-dialog v-model="on_line_of" :destroy-on-close="true" :show-close="false" style="
      background: linear-gradient(
        135deg,
        rgba(0, 100, 255, 0),
        rgba(0, 106, 133, 0)
      );
    ">
		<template #header="{ close }">
			<div>
				<el-button type="danger" @click="close" style="position: absolute; top: 80px; z-index: 999; right: 0">
					X 关闭
				</el-button>
			</div>
		</template>
		<div>
			<div class="index_pop_left" style="left: -138px; position: absolute; z-index: -99; top: 100px">
				<img src="https://dtiotkecheng.hzsafer.com:56280/img/pop_left.png" />
			</div>
			<div style="
          position: absolute;
          width: 100%;
          height: 700px;
          top: 90px;
          background: url('https://dtiotkecheng.hzsafer.com:56280/img/pop_bg.png');
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          background-size: 100% 100%;
        ">
				<onLine :registrationCode="registrationCode"></onLine>
			</div>
			<div class="index_pop_left" style="right: -138px; position: absolute; z-index: -99; top: 100px">
				<img src="https://dtiotkecheng.hzsafer.com:56280/img/pop_right.png" />
			</div>
		</div>
	</el-dialog>
</template>

<script setup>
	import mapStyles from "./mapStyle";
	import wblog from "./wblog.vue";
	import infos from "./infos.vue";
	import {
		BaiduMap,
		BmlMarkerClusterer
	} from "vue-baidu-map-3x";
	import left1 from "./left1.vue";
	import left2 from "./left2.vue";
	import left3 from "./left3.vue";
	import left4 from "./left4.vue";
	import right1 from "./right1.vue";
	import right2 from "./right2.vue";
	import right3 from "./right3.vue";
	import right4 from "./right4.vue";

	import onLine from "./on_line.vue";
	import {
		getlist,
		getElevators
	} from "@/api";
	import {
		ref,
		reactive,
		onMounted
	} from "vue";
	import {
		useRoute
	} from 'vue-router'
	const route = useRoute()
	const username = ref('')
	const points = reactive([]);
	const hasData = ref(false);
	const dialogVisible = ref(false);
	const dialogVisible1 = ref(false);

	const windowsinfo = ref(1);

	const on_line_of = ref(false);
	const urlindex = (e) => {
		windowsinfo.value = e;
	};




	onMounted(() => {
		username.value = route.query.username || ''
		localStorage.setItem('username', username.value)
		getalldata().finally(() => {
			hasData.value = true;
		});
	});

	const infosopen = () => {
		dialogVisible1.value = true;
	};

	let registrationCode = ref("");
	const wblist = (e) => {
		registrationCode = e.rescueIdentificationCode;

		e.showInfoWindow = false;
		dialogVisible.value = true;
	};
	const active = ref(false);
	const draw = ({
		el,
		BMap,
		map
	}, point) => {
		const pixel = map.pointToOverlayPixel(new BMap.Point(point.lng, point.lat));
		el.style.left = pixel.x + 20 + "px";
		el.style.top = pixel.y - 240 + "px";
	};

	const getalldata = async () => {
		
		let usernames =  localStorage.getItem('username')
		// console.log(123123,username.value)
		const res = await getlist(usernames);
		points.splice(
			0,
			points.length,
			...res.data.map((item) => ({
				...item,
				lng: item.longitude,
				lat: item.latitude,
				showInfoWindow: false, // 为每个点添加显示状态
			}))
		);
	};

	let elevatorinfo = reactive([]); //电梯基本信息

	const infoWindowOpen = (point) => {
		// 先关闭其他所有点的overlay
		console.log(point);
		elevatorinfo = points.find((r) => r.elevatorId === point.elevatorId);
		// 获取所有点
		points.forEach((p) => {
			if (p !== point) {
				p.showInfoWindow = false;
			}
		});
		// 切换当前点的状态
		point.showInfoWindow = !point.showInfoWindow;
	};

	const infoWindowClose = (point) => {
		point.showInfoWindow = false;
	};
	const zoom = ref(6);

	let markerstyle = [{
		url: "https://dtiotkecheng.hzsafer.com:56280/img/zonshu.png",
		size: {
			width: 84,
			height: 100,
		},
		textSize: 20,
		textColor: "#42aff3",
		opt_textSize: 30,
		textStyle: {
			textShadow: "0 0 8px rgba(0,242,255,0.8)",
		},
		zIndex: "1",
		// offset: {1, 6}
	}, ];

	const mapStyle = reactive({
		styleJson: mapStyles,
	});
	const isMapZooming = ref(false);
	const handleZoomChange = (e) => {
		isMapZooming.value = true;
		zoom.value = e.target.getZoom(); // 正确获取方式
		console.log("当前缩放级别:", zoom.value);
		setTimeout(() => {
			isMapZooming.value = false;
		}, 300);
	};
	const on_line = async (e) => {
		registrationCode.value = e.registrationCode;
		on_line_of.value = true;
	};
</script>
<style scoped>
	.map-container {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		overflow: hidden;
		z-index: 1;
	}

	.bm-view {
		width: 100%;
		height: 100%;
	}

	.bm-info-window {
		z-index: 200 !important;
		background-color: transparent !important;
		border: none !important;
		max-width: 371px !important;
		height: 251px !important;
		background-image: url("https://dtiotkecheng.hzsafer.com:56280/img/ele_info.png") !important;
		background-size: 100% 100% !important;
	}

	@media screen and (min-width: 1920px) {
		.bm-view {
			zoom: 1.5;
		}
	}

	.top-image {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 100;
		/* :style="{ 'pointer-events': isMapZooming ? 'none' : 'auto' }" */
	}

	.top-image1 {
		margin-top: 150px;
		position: fixed;
		top: 0;
		left: 0;
		width: 700px;
		z-index: 100;
		/* :style="{ 'pointer-events': isMapZooming ? 'none' : 'auto' }" */
	}

	.top-image img {
		height: auto;
		display: block;
	}

	.left-data-panel {
		position: fixed;
		top: 5%;
		height: 90%;
		width: 455px;
		margin: 0 30px;
		background-color: rgba(10, 25, 74, 0.92);
		z-index: 95;
		/* :style="{ 'pointer-events': isMapZooming ? 'none' : 'auto' }" */
		display: flex;
		justify-content: center;
		align-items: flex-start;
		left: 0;
		border: 4px solid;
		border-image: linear-gradient(45deg, #022128, #092e61) 1;
		box-shadow: 0 0 5px rgba(0, 210, 255, 0.4), 0 0 20px rgba(23, 99, 205, 0.2);
	}

	.left-data-panel3 {
		position: fixed;
		top: 5%;
		height: 90%;
		width: 255px;
		margin: 0 30px;
		background-color: rgba(10, 25, 74, 0.92);
		z-index: 95;
		/* :style="{ 'pointer-events': isMapZooming ? 'none' : 'auto' }" */
		display: flex;
		justify-content: center;
		align-items: flex-start;
		left: 0;
		/* border: 4px solid; */
		border-image: linear-gradient(45deg, #022128, #092e61) 1;
		box-shadow: 0 0 5px rgba(0, 210, 255, 0.4), 0 0 20px rgba(23, 99, 205, 0.2);
	}

	.right-data-panel {
		position: fixed;
		top: 5%;
		height: 90%;
		width: 360px;
		margin: 0 30px;
		/* background-color: rgba(7 16 46 / 92%); */
		z-index: 15;
		/* :style="{ 'pointer-events': isMapZooming ? 'none' : 'auto' }" */
		right: 0;
		/* border: 1px solid; */
		/* border-image: linear-gradient(45deg, #022128, #3a7bd5) 1; */
	}

	.right-data-panel4 {
		position: fixed;
		top: 5%;
		height: 90%;
		width: 460px;
		margin: 0 30px;
		background-color: rgba(7 16 46 / 92%);
		z-index: 15;
		/* :style="{ 'pointer-events': isMapZooming ? 'none' : 'auto' }" */
		right: 0;
		border: 1px solid;
		border-image: linear-gradient(45deg, #022128, #3a7bd5) 1;
	}

	.title {
		font-size: 50px;
		/* position: fixed; */
		/* left: 50%; */
		/* top: 5%; */
		/* transform: translate(-50%, -50%); */
		margin: 10px 40px;
		color: #ffffff;
		text-align: center;
		width: fit-content;
		z-index: 999;
	}

	.bottom-buttons {
		position: fixed;
		bottom: 20px;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		gap: 20px;
		z-index: 100;
	}

	.bottom-buttons button {
		width: 140px;
		height: 60px;
		background-color: transparent;
		background-image: url("https://dtiotkecheng.hzsafer.com:56280/img/morenaniu.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		border: none;
		color: #ffffff;
		font-size: 18px;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.bottom-buttons button:hover {
		background-image: url("https://dtiotkecheng.hzsafer.com:56280/img/jihuo.png");
	}

	.bottom-image {
		position: fixed;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 1920px;
		height: 90px;
		background-image: url("https://dtiotkecheng.hzsafer.com:56280/img/di.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		z-index: 95;
		/* pointer-events: none; */
	}

	/* .bminfowindow {
	width: 371px;
	height: 251px;
	padding: 0 !important;
	border: none !important;
	background-color: transparent;
	background-image: url('https://dtiotkecheng.hzsafer.com:56280/img/ele_info.png');
	background-size: 100% 100%;
} */
	.sample {
		position: absolute;
		width: 340px;
		height: 360px;
		line-height: 40px;
		background: linear-gradient(135deg,
				rgba(0, 100, 255, 1),
				rgba(0, 106, 133, 1));
		overflow: hidden;
		box-shadow: 0 0 10px rgba(0, 84, 140, 0.8), 0 0 20px rgba(0, 100, 255, 0.6),
			inset 0 0 10px rgba(0, 150, 255, 0.5);
		color: #fff;
		text-align: center;
		padding: 10px;
		border: 1px solid rgba(0, 200, 255, 0.5);
		border-radius: 4px;
		animation: pulse 2s infinite alternate;
		z-index: 4000;
	}

	@keyframes pulse {
		0% {
			box-shadow: 0 0 10px rgba(0, 150, 255, 0.8), 0 0 20px rgba(0, 100, 255, 0.6),
				inset 0 0 10px rgba(0, 150, 255, 0.5);
		}

		100% {
			box-shadow: 0 0 15px rgba(0, 200, 255, 0.9), 0 0 30px rgba(0, 150, 255, 0.7),
				inset 0 0 15px rgba(0, 200, 255, 0.6);
		}
	}

	.sample.active {
		background: rgba(0, 0, 0, 0.75);
		color: #fff;
	}

	/* 彻底移除对话框所有默认背景和阴影 */

	.dialogwb {
		position: absolute;
		background: url("");
		width: 1700px;
		height: 840px;
		line-height: 40px;
		background: linear-gradient(135deg,
				rgba(0, 32, 80, 0.9),
				rgba(18, 18, 144, 1));
		overflow: hidden;
		box-shadow: 0 0 10px rgba(0, 84, 140, 0.8), 0 0 20px rgba(0, 100, 255, 0.6),
			inset 0 0 10px rgba(0, 150, 255, 0.5);
		color: #fff;
		text-align: center;
		padding: 10px;
		border: 1px solid rgba(0, 200, 255, 0.5);
		border-radius: 4px;
		animation: pulse 2s infinite alternate;
	}

	.dialoginfos {
		/* position: absolute; */
		margin-left: 10px;
		width: 1250px;
		height: 760px;
		line-height: 130px;

		/* background: linear-gradient(135deg, rgba(0, 32, 80, 0.9), rgba(18, 18, 144, 1.0)); */
		overflow: hidden;
		/* 		box-shadow:
			0 0 10px rgba(0, 84, 140, 0.8),
			0 0 20px rgba(0, 100, 255, 0.6),
			inset 0 0 10px rgba(0, 150, 255, 0.5); */
		color: #fff;
		text-align: center;
		padding: 10px;
		/* border: 1px solid rgba(0, 200, 255, 0.5); */
		border-radius: 4px;
		animation: pulse 2s infinite alternate;
	}
</style>